<template>
	<view>
		<view class="header_wrap">
			<view class="header">
				<view class="open_order">
					<text>开单</text>
				</view>
				<van-button custom-class="fs" type="primary" size="small" color="orange" @click="goManage">管理
				</van-button>
			</view>
			<view class="main_wrap">
				<view class="main" v-for="item in 5">
					<view class="main_top">
						<view class="top_tit">{种植户1}的20株木苗订单</view>
						<van-button plain type="primary" size="mini" custom-class="caozuo">操作</van-button>
					</view>
					<view class="main_bottom">
						<text>开单日期:2021-7-28</text>
						<text class="state">当前状态:待送货</text>
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>
		<van-dialog id="van-dialog" :show="false" message-align="left" show-cancel-button use-slot @confirm="confirm">
			<view class="dialog">
				<view class="warning">
					<image src="../../static/icon/warn.png.webp" mode=""></image>
				</view>

				<view class="tip">
					<view class="hd">系统提醒</view>
					<view>管理订单列表页中,除了已完成的订单不可选中删除外,其余订单均可删除</view>
				</view>
			</view>
		</van-dialog>



	</view>
</template>
<script>
	import Dialog from '../wxcomponents/vant/dialog/dialog.js';
	import vanButton from "../wxcomponents/vant/button/index.js"
	import Footer from "./footer.vue"
	export default {
		data() {
			return {

			}
		},
		components: {
			Footer,
			"van-button": vanButton
		},
		methods: {
			goManage() {
				Dialog.alert({

					confirmButtonText: '我已知晓,进入管理',
					theme: 'round-button',
					closeOnClickOverlay: true

				})
			},
			confirm() {
				console.log('点击了确认按钮')
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .popup_style {
		width: 700rpx;

		background-color: #FFFFFF;
	}

	.dialog {
		display: flex;
		align-items: center;
		margin-top: 50rpx;
		margin-left: 30rpx;

		.tip {
			margin-left: 30rpx;

			.hd {
				font-weight: bold;
				font-size: 40rpx;
				margin-bottom: 30rpx;
			}
		}

	}

	.warning {
		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.header_wrap {
		border: 1px solid red;
		padding: 20rpx 0;



		.header {
			background-color: #4CD964;
			display: flex;
			justify-content: space-between;
			padding: 8rpx 15rpx 20rpx 20rpx;
			margin-bottom: 20rpx;

			/deep/ .fs {
				font-size: 36rpx !important;
			}

			.open_order {
				font-size: 40rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.main_wrap {
			padding: 0 15rpx;

			.main {
				border-radius: 10rpx;
				border: 1px solid red;
				padding-left: 20rpx;
				padding-right: 10rpx;
				padding-top: 30rpx;
				padding-bottom: 5rpx;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0 !important;
				}

				.main_top {
					display: flex;
					justify-content: space-between;

					.top_tit {
						font-weight: bold;
						font-size: 36rpx;
					}

					/deep/ .caozuo {
						margin-right: 30rpx !important;
					}
				}

				.main_bottom {
					border-bottom: 1px solid blue;
					padding-bottom: 30rpx;
					font-size: 25rpx;

					.state {
						margin-left: 20rpx;

					}
				}
			}
		}
	}
</style>
